<template>
  <div class="after-node-btn" @click="state.visible = true">
    
    <el-popover placement="right" v-model="state.visible" >
      <zh-list :data-source="state.listData">
        <template #renderItem="{ item }">
          <a-list-item @click="addType(item.type)" v-if="item.showFlag"><el-link :underline="false" ><SvgIcon color="#f78b3e" :name="item.icon" /><span style="padding-left:5px">{{ item.title }}</span></el-link></a-list-item>
        </template> 
        
      </zh-list>
      <!-- 当审批节点下添加意见分支,就不允许添加其他类型的节点了 -->
      <template #reference>
        <img src="" />
      </template>
    </el-popover>
  </div>
</template>
<script lang="ts" setup name="FlowAddNode">
import { uuid } from '@/utils/util';
  //------------------接收传入参数(组件)-------------------
  const props = defineProps({
    node: {
      type: Object,
      default: function() {
        return {
          addable: true,
        };
      },
    },
    nodeType: {
      type: Number,
      default: 1,
    },
    id: {
      type: String,
      default: '',
    },

  });
  //------------------内部变量定义-------------------------
   const serviceFlow=$store.serviceFlow
  const state =reactive({
    visible: false,
    listData:[
      {type:5,icon:'ele-Opportunity',title:'功能节点',showFlag:true},
      {type:4,icon:'ele-Share',title:'条件分支',showFlag:true},
      {type:9,icon:'ele-Operation',title:'并行分支',showFlag:true}
    ]
  });
 
  //------------------定义调用方法-------------------------
  function addType(type) {
        var addNode = null;
        if (type == 1 || type == 6) {
          addNode = addApproverNode(type);
        } else if (type == 2) {
          addNode = addCcNode(type);
        } else if (type == 4) {
          addNode = addBranchNode(type);
        } else if (type == 5) {
          addNode = addEventNode(type);
        } else if (type == 7) {
          addNode = addSuggestNode(type);
        } else if (type == 9) {
          addNode = addParallelNode(type);
        } else if (type == 20) {
          addNode = addNoticeNode(type);
        }
        const nodeType = props.nodeType;
        const currNode = props.node;
        const id = props.id;
        serviceFlow.ADD_NODE({ addNode, currNode, nodeType, id })
        
        // this.$message.success('节点添加成功');
      }
      /**
       * 添加审批节点 ||
       */
      function addApproverNode(type) {
        return {
          id: uuid(),
          name: type == 1 ? '审批人' : '办理人',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 流程基础配置属性
          attr: {
            // 审批类型
            approvalMethod: 1,
            // 审批方式
            approvalMode: 1,
            // 审批人与发起人为同一人时
            sameMode: 2,
            // 审批人为空时
            noHander: 4,
          },
          // 审批设置
          approverGroups: [
            {
              id: uuid(),
              // 审批人模式
              approverType: 1,
              // 层级模式
              levelMode: 1,
              // 审批人ID
              approverIds: [],
              // 审批人名称
              approverNames: [],
            },
          ],
          // 表单权限
          privileges: [],
          // 高级配置
          configure: {},
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
          // 显示内容
          content: null,
        };
      }
      /**
       * 添加抄送节点
       */
      function addCcNode(type) {
        return {
          id: uuid(),
          name: '抄送人',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 抄送人设置
          approverGroups: [
            {
              id: uuid(),
              // 审批人模式
              approverType: 1,
              // 层级模式
              levelMode: 1,
              // 审批人ID
              approverIds: [],
              // 审批人名称
              approverNames: [],
            },
          ],
          // 表单权限
          privileges: [],
          // 高级配置
          configure: {},
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
          // 显示内容
          content: null,
        };
      }
      /**
       * 添加通知节点
       */
      function addNoticeNode(type) {
        return {
          id: uuid(),
          name: '通知',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 审批设置
          approverGroups: [
            {
              id: uuid(),
              // 审批人模式
              approverType: 1,
              // 层级模式
              levelMode: 1,
              // 审批人ID
              approverIds: [],
              // 审批人名称
              approverNames: [],
            },
          ],
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        };
      }
      /**
       * 添加事件节点
       */
      function addEventNode(type) {
        return {
          id: uuid(),
          funcTitle: "",
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        };
      }
      /**
       * 添加办理节点
       
      function addWriteNode(type) {
        return {
          id: uuid(),
          name: '办理',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 表单权限
          privileges: [],
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        };
      }
      */
      /**
       * 添加分支节点
       */
      function addBranchNode(type) {
        const uid = uuid();
        return {
          id: uid,
          name: '路由',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
          // 条件节点
          conditionNodes: [
            {
              id: uuid(),
              pid: uid,
              name: '分支1',
              type: 3,
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 是否有错误
              error: false,
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 条件组
              conditionGroup: [],
              // 流程基础配置属性
              attr: {
                // 分支类型
                branchType: 1,
                // 优先级
                priorityLevel: 1,
                // 显示优先级
                showPriorityLevel: true,
              },
            },
            {
              id: uuid(),
              pid: uid,
              name: '其他情况',
              type: 3,
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 条件组
              conditionGroup: [],
              // 流程基础配置属性
              attr: {
                // 分支类型
                branchType: 1,
                // 优先级
                priorityLevel: 2,
                // 显示优先级
                showPriorityLevel: true,
              },
              // 是否有错误
              error: false,
              // 显示内容
              content: '其他情况进入此流程',
            },
          ],
        };
      }
      /**
       * 添加意见分支节点
       */
      function addSuggestNode(type) {
        const uid = uuid();
        return {
          id: uid,
          name: '意见',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
          // 是否有错误
          error: false,
          conditionNodes: [
            {
              id: uuid(),
              pid: uid,
              name: '同意',
              type: 8,
              // 流程基础配置属性
              attr: {
                // 优先级
                priorityLevel: 2,
              },
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 是否有错误
              error: false,
            },
            {
              id: uuid(),
              pid: uid,
              name: '不同意',
              type: 8,
              // 流程基础配置属性
              attr: {
                // 优先级
                priorityLevel: 2,
              },
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 是否有错误
              error: false,
            },
          ],
        };
      }
      /**
       * 添加并行节点
       */
      function addParallelNode(type) {
        const uid = uuid();
        return {
          id: uid,
          name: '并行',
          type: type,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
          status: -1,
          // 显示添加按钮
          addable: true,
          // 聚合节点
          childNode: {
            id: uuid(),
            pid: uid,
            name: '聚合',
            type: 11,
            status: -1,
            childNode: null,
            // 显示添加按钮
            addable: true,
            // 可删除提示
            deletable: false,
          },
          conditionNodes: [
            {
              id: uuid(),
              pid: uid,
              name: '并行1',
              type: 10,
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 是否有错误
              error: false,
              // 显示内容
              content: '任意(其他)',
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 流程基础配置属性
              attr: {
                // 分支类型
                branchType: 3,
              },
              // 条件组
              conditionGroup: [],
            },
            {
              id: uuid(),
              pid: uid,
              name: '并行2',
              type: 10,
              // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
              status: -1,
              // 是否有错误
              error: false,
              // 显示内容
              content: '任意(其他)',
              // 子节点
              childNode: null,
              // 显示添加按钮
              addable: true,
              // 可删除提示
              deletable: false,
              // 流程基础配置属性
              attr: {
                // 分支类型
                branchType: 3,
              },
              // 条件组
              conditionGroup: [],
            },
          ],
        };
      }
</script>
<style lang="scss" scoped>
  .active-type{
    background-color: var(--el-color-primary);
  }
</style>